<template>
    <ui-main :title="$route.name">

        <div class="m-50">
            <ui-timeline>
                <ui-timeline-item v-for="(item,i) in json" :key="i" :color="item.color">
                    <template v-slot:default>
                        <div>{{item.title}}</div>
                        <div class="ui-ellipsis">{{item.subTitle}}</div>
                    </template>

                    <template v-slot:bottom>
                        <div class="f-12 t-grey">
                            <div>2019-09-23</div>
                            <div>15:34</div>
                        </div>
                    </template>
                </ui-timeline-item>
            </ui-timeline>
        </div>


        <ui-load-md file="timeline"></ui-load-md>
    </ui-main>
</template>
<script>
    export default {
        data(){
            return {
                json:[
                    {
                        title:'菜刀',
                        subTitle: '发起申请',
                        color: '#25B7D3',
                    },
                    {
                        title:'脚步',
                        subTitle: '等待审批',
                        color: '#FA5555',
                    },
                    {
                        title:'抄送 5 人',
                        subTitle: '张珊、力士、王武、哈哈人、脚王',
                        color: '',
                    },
                    {
                        title:'主标题',
                        subTitle: '我是副标题',
                        color: 'orange',
                    },
                ]
            }
        },
    }
</script>
